<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="8">
            <el-tag  effect="dark"><i class="el-icon-s-custom"></i>{{userName}}</el-tag>
           <el-tag  effect="dark"><i class="el-icon-s-platform"></i>在线考试系统</el-tag>
        </el-col>
        <el-col :span="8">
          &nbsp;
        </el-col>
        <el-col :span="8" align="right">
          <el-button type="primary"  size="mini" round @click="backLogin">退出系统</el-button>
          <el-button type="primary" size="mini" round @click="backIndex" >系统首页</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- router 开启路由地址配置-->
        <el-menu
        :default-openeds="['1','2']"
        text-color="white"
        background-color="#333333"
        router>
             <!-- 一级菜单-->
             <!-- index 菜单索引-->
             <template v-for="x in node ">
               <el-submenu :index="x.index">
                     <template slot="title">
                          <i :class="x.icon"></i>
                          <span>{{x.name}}</span>
                       </template>
                      <!-- 二级菜单-->
                      <template v-if="x.children!=null">

                        <template v-for="y in x.children">
                          <!-- index 路由地址-->
                           <el-menu-item :index="y.url">
                                  <template>
                                      <i :class="y.icon"></i>
                                      {{y.name}}
                                    </template>
                          </el-menu-item>
                        </template>
                      </template>
               </el-submenu>
             </template>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 路由视图-->
        <router-view ></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>

  export default {
    name: "index",
    data() {
      return {
        userName:"",//登录用户名
        node: []
      }
    },
    methods:{
        backIndex(){
          this.$router.push("/welcome");

        },
        backLogin(){
          //回到登录页面
          this.$router.push("/login");
          //清除登录缓存
          localStorage.removeItem("userName");
          //刷新
          this.$router.go(0);
        }
    },
    mounted(){
      //获取存在本地存储的cookie的用户名
      this.userName = localStorage.getItem("userName");
      var self = this;
      //查询用户权限
      this.$http.get("/userInfo/queryPowerByName",{
        params:
        {"userName":this.userName},
      }).then(function(rs){
        self.node = rs.data.data;
      }).catch(function(rs){
        console.log(rs);
        console.log("服务器连接错误");
      })

    }

  }
</script>

<style >
  html,
  body {
    height: 100%;
    margin: 0px;
  }

  .el-container {
    height: 100%;
  }


  .el-header {
    background-color: #444444;
    color: white;
    padding-top: 15px;

  }

  .el-aside {
    background-color: #333333;
    color: white;
    height: 100%;
  }

  .el-main {
    background-color: white;
    color: #333;
  }
</style>
